// import numStatus '../'
import { useSelector, useDispatch } from "react-redux";
import numStatus from "@/store/NumStatus";

const view = () => {
    const dispatch = useDispatch();
    // 获取仓库数据
    const { num } = useSelector(
        (state: RootState) => (
            console.log("state: ", state),
            {
                num: state.NumStatusReducer.num,
            }
        )
    );
    const { sarr } = useSelector((state: RootState) => ({
        sarr: state.ArrStatusReducer.sarr,
    }));
    // 修改仓库数据
    const changeNum = () => {
        dispatch({ type: "add1" });
    };
    // 异步的写法 redux-thunk的基本使用 dispatch(异步执行的函数)
    // redux-thunk可以使 store.dispatch(action) 中的action可以是函数类型 从而可以进行异步请求（axios）等处理
    const changeNum2 = () => {
        dispatch(numStatus.asyncActions.asyncAdd1);
    };
    const changeArr = () => {
        dispatch({ type: "sarrpush1", value: 123 });
    };
    return (
        <div className="home">
            <p>Page1</p>
            <p>{num}</p>
            <p>{sarr}</p>
            <button onClick={changeNum}>按钮1</button>
            <button onClick={changeNum2}>异步按钮</button>
            <button onClick={changeArr}>按钮2</button>
        </div>
    );
};
export default view;
